<!-- eslint-disable vue/no-duplicate-attributes -->
<template>
  <m-modal
    :visible="visible"
    mask
    resizable
    title="名称"
    :showFooter="true"
    cancelText="取 消"
    okText="确 定"
    :width="292"
    :height="244"
    class="v-named-element-name-modal"
    :confirmDisabled="disabled"
    size="small"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div style="width: 100%; height: 100%">
      <el-input
        id="nameElementModal"
        ref="inputRef"
        v-model="inputvalue"
        v-focus
        type="textarea"
        :disabled="disabled || isRootProfile"
        class="_input g-one-line"
        :maxLength="100"
        maxlength="100"
        show-word-limit
        @change="handelChange"
      />
    </div>
  </m-modal>
</template>

<script lang="ts" setup>
import { PropertyRow } from "../../types";
import { computed, ref, watch } from "vue";
import { propertyUtil } from "../../PropertyUtil";
import { BusEvent } from "@/constants/Enums";
import { modelService } from "@/modules/model/service";
import { usePortal } from "@/common/usePortal";
import { mixPopup } from "@/common/Portal";
import { desensitize } from "@/util/common";
import { actionManager } from "@/action/ActionManager";
import { ActionKey } from "@/action/ActionKey";
import { useKeyboardEvents } from "@/action/keyboardHandler";
import { ElInput } from "element-plus";

defineOptions(
  mixPopup({
    name: "named-element-name-modal"
  })
);

/**
 * 单行输入框
 */
const props = defineProps<{
  row: PropertyRow;
  disabled: boolean;
  encrypted?: boolean;
}>();

const emit = defineEmits<{
  (event: "sure", data: any): void;
  (event: "close", data: any): void;
}>();

let inputvalue = ref<string>(props.row.value as string);
const inputRef = ref<InstanceType<typeof ElInput>>();

watch(
  () => props.row.value,
  newVal => {
    inputvalue.value = props.encrypted ? desensitize(newVal) : (newVal as string);
  },
  { immediate: true }
);
const isRootProfile = computed(() => {
  // 扩展包编辑，不允许修改正编辑的扩展包的名称
  if (app.activeProject?.config?.isProfile) {
    // 扩展包编辑，不允许修改正编辑的扩展包的名称
    const profileModelId = app.global.profileEditProjectIdMapModel.profileNameToProfileModelIdMap.get(
      app.activeProject?.config?.profileName
    ) as string;
    if (profileModelId === props.row.modelId) {
      return true;
    }
  }
  return false;
});

const { visible, handleCancel } = usePortal(emit);

const handleOk = async () => {
  if (props.disabled || isRootProfile.value) return;
  const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, app.activeProject!.id);
  dto.value = inputvalue.value;
  let res = await modelService.updateModelProperty({ ...dto, key: props.row.specificComponent || props.row.key });
  if (res) {
    app.$bus.emit(BusEvent.REFRESH_PROPERTY, props.row.modelId);
  }
  emit("sure", inputvalue.value);
};

const handelChange = async () => {
  // if (props.disabled || isRootProfile.value) return;
  // const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, app.activeProject!.id);
  // dto.value = inputvalue.value;
  // let res = await modelService.updateModelProperty(dto);
  // if (res) {
  //   app.$bus.emit(BusEvent.REFRESH_POPERTY, props.row.modelId);
  // }
};

async function openChooseTerm() {
  const action = actionManager.getAction(ActionKey.chooseTerm);
  if (!action) return;
  await action.run("nameElementModal", callback);
}
function callback(scenario: string, term: string) {
  if (scenario === "nameElementModal") {
    console.error("进入回调********nameElementModal", term);
    inputvalue.value = term;
    inputRef.value!.focus();
  }
}
useKeyboardEvents({
  "Ctrl+T": () => openChooseTerm()
});
</script>
<style lang="scss">
.v-named-element-name-modal {
  ._input {
    width: 100%;
    height: 100%;
    .el-textarea__inner {
      height: 100%;
    }
  }
}
</style>
